<template>
	<view class="wechat-login-page">
		<view class="logo-section">
			<view class="logo-container">
				<up-image src="/static/webp/logo.svg" shape="circle" width="80px" height="80px"></up-image>
				<view class="app-title">杭州九号车友会</view>
				<view class="app-subtitle">车友一站式组织管理平台</view>
			</view>
		</view>
		<view class="login-form">
			<view class="wechat-intro">
				<view class="wechat-icon">
					<text class="iconfont">&#xe603;</text>
				</view>
				<view class="wechat-title">微信授权登录</view>
				<view class="wechat-desc">使用微信账号快速登录，享受更便捷的骑行体验</view>
			</view>
			<up-checkbox :customStyle="{marginBottom: '24px'}" activeColor="#3b82f6"  size="16px"
				v-model:checked="agree" usedAlone>
				<template #label>
					<view class="check-text">
						<text>我已阅读并同意</text>
						<text class="link">《用户协议》</text>
						<text>和</text>
						<text class="link">《隐私政策》</text>
					</view>
				</template>
			</up-checkbox>
			<up-button iconColor="#fff" :loading="loading" :disabled="!agree" icon="weixin-fill" text="微信授权登录" :customStyle="{
				height: '52px',
				background: 'linear-gradient(135deg, #3b82f6 0%, #1e40af 100%)',
				color: 'white',
				borderRadius: '12px',
				fontSize: '14px',
				fontWeight: '700',
				marginBottom: '24px',
				boxShadow: '0 4px 12px rgba(59, 130, 246, 0.3)'
			}" @click="Auth" loadingText="正在授权..."></up-button>
			<view class="login-notice">
				<view class="notice-text">
					<view>🔒</view>
					<view>我们将通过微信获取您的基本信息，用于创建和完善您的账户</view>
				</view>
			</view>
		</view>
		<view class="up-flex up-flex-center up-flex-items-center up-m-t-64">
			<view class="register-text">暂不需要登录？</view>
			<view class="register-btn" @click="NineBot">游客模式</view>
		</view>
	</view>
	<u-popup :show="show" :overlayStyle="{
		background: 'rgba(0, 0, 0, 0.6)',
		backdropFilter: 'blur(8px)'
	}" :round="10" :safeAreaInsetBottom="false" mode="center">
		<view class="profile-modal">
			<view class="modal-header">
				<up-image src="/static/svg/register.svg" width="64px" height="64px" />
				<view class="modal-title">完善个人信息</view>
				<view class="modal-subtitle">为了给您提供更好的服务，请完善您的个人信息</view>
			</view>
			<view class="up-m-b-64">
				<view class="info-benefits">
					<view class="benefit-item">
						<view>🏆</view>
						<view class="benefit-text">参与更多活动</view>
					</view>
					<view class="benefit-item">
						<view>🤝</view>
						<view class="benefit-text">结识更多骑友</view>
					</view>
					<view class="benefit-item">
						<view>🔍</view>
						<view class="benefit-text">探索更多跑山路线</view>
					</view>
				</view>
			</view>
			<view class="modal-btn modal-btn-primary up-m-b-16" @click="AuthInfo">
				<view>✨</view>
				<view>立刻完善</view>
			</view>
			<view class="modal-btn modal-btn-secondary" @click="Home">
				<view>⏰</view>
				<view>稍后完善</view>
			</view>
		</view>
	</u-popup>

</template>

<script setup>
	import {
		ref
	} from 'vue';
	import LoginAPi from '@/Api/Login.js'
	import Utils from '@/utils/common.js'
	import {
		setToken
	} from '@/utils/auth.js';

	const agree = ref(false)
	const show = ref(false)
	const loading = ref(false)


	const NineBot = () => {
		uni.reLaunch({
			url: '/pages/NineBot'
		})
	}

	const Home = () => {
		uni.switchTab({
			url: '/pages/Home'
		})
	}
	
	const AuthInfo = () =>{
		uni.navigateTo({
			url: '/subPackages/mine/Register'
		})
	}


	/**
	 * 授权登录
	 */
	const Auth = () => {
		if (!agree.value) {
			return
		}
		loading.value = true
		uni.login({
			success: (loginResp) => {
				LoginAPi.Auth(loginResp.code).then(resp => {
					loading.value = false
					const token = resp.data.token
					const auth = resp.data.auth
					// 存储auth (0未认证 1认证 未认证状态下不允许参加活动)
					uni.setStorageSync('auth', auth)
					setToken(token)
					// 未认证
					if (auth === 0) {
						show.value = true
						return
					}
					Home()
				})
			}
		})
	}
</script>

<style lang="scss" scoped>
	.wechat-login-page {
		min-height: 100vh;
		background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
		// background: linear-gradient(135deg, #1E40AF 0%, #3B82F6 50%, #60A5FA 100%);
		display: flex;
		flex-direction: column;
		padding: 48px 24px 24px;
		position: relative;
		overflow: hidden;

		.logo-section {
			text-align: center;
			margin-bottom: 48px;
			margin-top: 32px;
			position: relative;
			z-index: 1;

			.logo-container {
				display: flex;
				flex-direction: column;
				align-items: center;
				gap: 16px;

				.app-title {
					font-size: 24px;
					font-weight: 800;
					color: white;
					margin: 0;
					text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
				}

				.app-subtitle {
					font-size: 12px;
					color: rgba(255, 255, 255, 0.9);
					margin: 0;
					font-weight: 500;
					text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
				}
			}
		}

		.login-form {
			background: rgba(255, 255, 255, 0.95);
			border-radius: 20px;
			padding: 32px;
			margin-bottom: 32px;
			backdrop-filter: blur(20px);
			box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
			border: 1px solid rgba(255, 255, 255, 0.2);
			position: relative;
			z-index: 1;
			transition: all 0.3s ease;

			.wechat-intro {
				text-align: center;
				margin-bottom: 32px;

				.wechat-icon {
					width: 60px;
					height: 60px;
					margin: 0 auto 16px;
					color: #07c160;
					display: flex;
					align-items: center;
					justify-content: center;

					.iconfont {
						font-size: 50px;
					}

				}

				.wechat-title {
					font-size: 18px;
					font-weight: 700;
					color: #1e293b;
					margin: 0 0 10px 0;
				}

				.wechat-desc {
					font-size: 12px;
					color: #64748b;
					margin: 0;
					line-height: 1.5;
				}
			}


			.login-notice {
				background: rgba(7, 193, 96, 0.1);
				border: 1px solid rgba(7, 193, 96, 0.2);
				border-radius: 8px;
				padding: 16px;

				.notice-text {
					font-size: 12px;
					color: #059669;
					margin: 0;
					display: flex;
					align-items: flex-start;
					gap: 8px;
					line-height: 1.4;
				}
			}

			.check-text {
				cursor: pointer;
				font-size: 12px;
				color: #64748b;
				line-height: 1.5;

				.link {
					color: #3b82f6;
					text-decoration: none;
					font-weight: 600;
				}
			}
			
		}

		.register-text {
			color: rgba(255, 255, 255, 0.8);
			font-size: 12px;
			margin-right: 8px;
		}

		.register-btn {
			color: white;
			font-weight: 600;
			text-decoration: none;
			font-size: 12px;
			padding: 8px 16px;
			border-radius: 8px;
			background: rgba(255, 255, 255, 0.1);
			transition: all 0.3s ease;
		}
	}

	.profile-modal {
		background: white;
		border-radius: 20px;
		padding: 24px;
		box-sizing: border-box;
		width: 82vw;
		box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
		position: relative;

		.modal-header {
			display: flex;
			flex-direction: column;
			align-items: center;
			margin-bottom: 24px;

			.modal-title {
				font-size: 18px;
				font-weight: 700;
				color: #1e293b;
				margin: 16px 0 8px;
			}

			.modal-subtitle {
				font-size: 12px;
				color: #64748b;
				margin: 0;
				line-height: 1.5;
			}
		}

		.info-benefits {
			display: flex;
			flex-direction: column;
			gap: 16px;

			.benefit-item {
				display: flex;
				align-items: center;
				gap: 12px;
				padding: 16px;
				background: rgba(7, 193, 96, 0.05);
				border-radius: 12px;
				border: 1px solid rgba(7, 193, 96, 0.1);

				.benefit-text {
					font-size: 12px;
					color: #1e293b;
					font-weight: 500;
				}
			}


		}

		.modal-btn {
			border: none;
			border-radius: 12px;
			font-weight: 600;
			cursor: pointer;
			transition: all 0.3s ease;
			display: flex;
			align-items: center;
			justify-content: center;
			gap: 8px;
			padding: 14px 16px;
			font-size: 14px;
		}

		.modal-btn-primary {
			background: linear-gradient(135deg, #07c160 0%, #06ad56 100%);
			color: white;
			box-shadow: 0 4px 12px rgba(7, 193, 96, 0.3);
		}

		.modal-btn-secondary {
			background: rgba(100, 116, 139, 0.1);
			color: #64748b;
			border: 1px solid rgba(100, 116, 139, 0.2);
		}
	}
</style>